<template>
  <div class="main">
    <div class="list">
      <div class="btn">
        <el-button type="primary" plain @click="add">新增一级项</el-button>
        <el-button
          type="primary"
          style="margin-left: auto !important"
          :disabled="!Node.level || ruleForm.pid == 0 || level == 3"
          plain
          @click="addItem"
          >新增
        </el-button>
        <el-button type="primary" plain
           :disabled="!Node.level || ruleForm.pid == 0"
                   @click="deleteItem"
          >删除</el-button>
      </div>
      <el-tree default-expand-all :data="list" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="content">
      <el-form
        :model="ruleForm"
        style="width: 100%; margin-top: 20px"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="90px"
        v-if="showAdd"
      >
        <el-form-item label="类型名称" prop="title" v-if="level == 0">
          <el-input v-model="ruleForm.title" maxlength="50" show-word-limit placeholder="请输入"></el-input>
        </el-form-item>
        <template v-else>
          <el-form-item label="父节点">
            <el-input v-model="ruleForm.parent_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="类型名称" prop="title">
            <el-input v-model="ruleForm.title" maxlength="50" show-word-limit placeholder="请输入"></el-input>
          </el-form-item>
        </template>
        <!--<el-form-item label="所属类型" prop="type">-->
        <!--  <el-select style="width: 100%" v-model="ruleForm.type" placeholder="请选择">-->
        <!--    <el-option label="安全生产" :value="1">安全生产</el-option>-->
        <!--  </el-select>-->
        <!--</el-form-item>-->
        <div style="text-align: center; margin-top: 80px">
          <el-button type="primary" @click="showAdd = false">取消</el-button>
          <el-button type="primary" @click="save">确认</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from '@/libs/request';

export default {
  name: 'training',
  data() {
    return {
      list: [],
      ruleForm: {
        title: '',
        pid: 0,
        parent_name: '',
      },
      showAdd: false,
      level: 0,
      rules: {
        title: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
      },
      Node: {},
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      let loading = this.$loading()
      request({
        url: '/traintype/list',
        method: 'post',
      }).then(res => {
        this.list = res.data.list;
        loading.close()
      }).catch(err => {
        loading.close()
      })
    },
    save() {
      let load = this.$loading()
      request({
        url: '/traintype/save',
        method: 'post',
        data: this.ruleForm,
      }).then(res => {
        this.showAdd = false;
        this.getList()
        this.$message.success('添加成功')
        load.close()
      }).catch(err => {
        load.close()
      })
    },
    add() {
      this.level = 0
      this.showAdd = true
      this.ruleForm = {
        title: '',
        pid: 0,
        parent_name: '',
      };
    },
    addItem() {
      this.level = this.Node.level;
      this.showAdd = true
    },
    handleNodeClick(data, Node) {
      this.Node = Node;
      this.level = data.level;
      this.ruleForm.title = '';
      this.ruleForm.pid = data.id
      this.ruleForm.parent_name = data.title
      this.showAdd = false
    },
    deleteItem() {
      this.$confirm(`确定要删除"${this.Node.data.title}"吗?`, '提醒', {
        type: 'warning'
      }).then((res) => {
        let loading = this.$loading()
        request({
          url: '/traintype/delete',
          method: 'post',
          data: {id: this.Node.data.id}
        }).then(res => {
          this.$message.success('删除成功')
          this.getList()
          loading.close()
        }).catch(err => {
          this.$message.error(err.msg)
          loading.close()
        })
      }).catch(err => {
      })
    },
  },
};
</script>

<style scoped>
.main {
  width: 100%;
  height: calc(-131px + 100vh);
  background: #fff;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 25px 20px;
}

.list {
  width: 300px;
  height: 100%;
  overflow: auto;
  flex-shrink: 0;
  padding-right: 15px;
  padding-top: 10px;
}

.btn {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.content {
  width: 100%;
  height: 70vh;
  border-left: 1px solid #e3e3e3;
  padding: 0 20px;
}
</style>
